<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸属性</title>
		<style>
			sp an{
				font-size: 20em;
				color: rgb(23,153,94,.1);
			}
			/* 尺寸属性：最大宽度与最小宽度，功能：【屏幕】自适应
			 
			 */
			div.container{
				background-color: #aaffff;
			}
			div.box{
				background-color: #ff00ff;
				/* 设置宽度：80% */
				width: 80%;
				/* 最大宽度属性：页面最大宽度值，如果与width同时出现，以最大宽度值 */
				max-width: 600px;
				/* 最小宽度属性：页面最小宽度值，达到最小值，页面内容不会被压缩
				   宽度与最小宽度同时出现，宽度大于最小宽度，宽度值以大的为准
				   宽度与最大宽度和最小宽度同时出现，宽度>最大宽度>最小宽度，宽度值以大的为准
				 */
				min-width: 500px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi blanditiis natus voluptate cum repudiandae, necessitatibus, soluta eum non ea quae recusandae. Placeat, consectetur doloribus? Magnam nesciunt voluptatum praesentium numquam voluptate?</div>
		</div>
		<!-- 常用样式单位
		    1.针对尺寸：%、px、绝对值 像素：em、移动端 针对字体
			2.针对颜色：网页三原色：红、绿、蓝色，组成页面任意颜色
			   rgba(0~255,0~255,0~255，0~1)
			   十六进制写法：#rrggbb    0~9 a~z A~Z  常用：#000000  #ffffff
			   简写：#000  #fff
		 -->
		 <span>lorem</span>
	</body>
</html>